import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import {fetchUserLogin} from '../../actions/user'
import md5 from 'crypto-js/md5'

class Login extends Component {
    handleLogin(e) {
        const phone = this.refs.phone.value.trim()
        const pwd = md5(this.refs.pwd.value.trim())
        const {dispatch} = this.props;
        dispatch(fetchUserLogin({USERNAME: phone, PASSWORD: pwd}))
    }

    render() {
        return (
            <div>
                <label>用户名</label>
                <input type="text" id="userName" placeholder="请输入您的用户名" ref="phone"/>
                <label>密码</label>
                <input type="text" id="userPwd" placeholder="请输入您的密码" ref="pwd"/>
                <button type="submit" id="loginBtn" onClick={e => {
                    this.handleLogin(e)
                }}>
                    登录
                </button>
                <div className="loginTools">
                    <Link to="/register" className="left">点此注册</Link>
                    <Link to="/resetpwd" className="right">忘记密码</Link>
                </div>
            </div>

        )
    }
}
Login.propTypes = {
    dispatch: PropTypes.func.isRequired
}

export default connect()(Login);